<template>
	<view class="flex-col page">
		<u-navbar title="我的关注" :autoBack="true" bgColor="#fff" placeholder="true"></u-navbar>
		<view class="flex-col group">
			<view class="flex-row justify-between self-stretch group_2">
				<text class="font text " :class="sel_typ == 1 ? 'text_2' : 'text_3'" @click="chek_sel(1)">口粮</text>
				<text class="font text " :class="sel_typ == 2 ? 'text_2' : 'text_3'" @click="chek_sel(2)">酒水</text>
				<!-- <view class="self-start section"></view> -->
			</view>
			<!-- <viesw class="flex-col justify-between self-stretch group_2">
				<text class="font text " :class="sel_typ == 3 ? 'text_2' : 'text_3'" @click="chek_sel(3)">零食</text>
				<view class="self-start section"></view>
			</viesw> -->

		</view>

		<view class="mt-8 flex-col section_2">
			<view class="flex-row group">
				<text class="font text text_3">品牌</text>
				<text class="font text text_4">参考价格</text>
				<text class="font text text_5">涨跌幅</text>
			</view>
			<view class="flex-col list">
				<view class="flex-row list-item" v-for="(item, index) in list" :key="index" @click="detail(item)">
					<text class="font_2 text_3 u-line-1">{{ item.yan }}</text>

					<text class="font_3 text_4">{{ item.hq_price }}</text>
					<view class="flex-row items-center group_4">
						<image class="shrink-0 image" v-if="item.type == 1"
							src="https://www.dlxx.top/static/images/322f6f1bfba3e5ec7a20a8e906ea1060.png" />
						<image class="shrink-0 image_2" v-else
							src="https://www.dlxx.top/static/images/b8648e7e42bc7f1191ac8107348f7064.png" />
						<text class="font_3 text ml-3-5">{{ item.fd }}</text>
					</view>
					<view class="flex-row items-center text_3 relative ml-25">
						<text class="font_4 text">历史行情</text>
						<view class="flex-col justify-start items-center shrink-0 text-wrapper ml-6-5"
							@click.stop="qxgz(item)">
							<text class="font_5 text text_6">取消关注</text>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	props: {},
	data() {
		return {
			list: [],
			userInfo: [],
			sel_typ: 1,
		};
	},
	onLoad() {
		this.getList();
	},
	methods: {
		chek_sel(typ) {
			this.sel_typ = typ;
			this.getList();
		},
		getList() {
			this.userInfo = uni.getStorageSync('userInfo');
			// if (this.userInfo.group_id == 1) return true;
			var url = '/api/index/getYanCollectList'
			if (this.sel_typ == 2) {
				url = '/api/index/getJiuCollectList'
			}
			this.$api.sendRequest({
				url: url,
				data: {
					user_id: this.userInfo.id
				},
				success: res => {
					console.log(res.data)
					if (res.code == 1) {
						this.list = res.data;
					}
				}
			});
		},
		detail(item) {
			uni.navigateTo({
				url: '/pages/index/detail?id=' + item.yan_id + '&title=' + item.yan
			})
		},
		qxgz(item) {
			let that = this
			var type = 'yan'
			var id = item.yan_id
			if (this.chek_sel == 1) {
				type = 'jiu'
				id = item.jiu_id
			}
			this.$api.sendRequest({
				url: '/api/index/uncollect',
				data: {
					id: id,
					user_id: this.userInfo.id,
					type: type
				},
				success: res => {
					if (res.code == 1) {
						//this.item.is_collect = 0;
						this.$util.showToast({
							title: '取消成功'
						});
					} else {
						this.$util.showToast({
							title: '操作失败，请重试'
						});
					}
					that.getList()
				}
			});
		},
	},
};
</script>

<style scoped lang="scss">
.ml-3-5 {
	margin-left: 7rpx;
}

.ml-31 {
	margin-left: 62rpx;
}

.page {
	background-color: #ffffff;
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%;

	.section {
		padding: 34rpx 0 20rpx;
		background-color: #ffffff;

		.text-wrapper {
			margin-left: 32rpx;
			margin-right: 10rpx;
			padding: 96rpx 0 18rpx;
			background-image: url('https://www.dlxx.top/static/images/05e0093ead41b70437e3214e578e2e5a.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.text_2 {
				color: #00140d;
				font-size: 28rpx;
				font-family: PingFangSC;
				line-height: 27rpx;

			}
		}
	}

	.text_3 {
		width: 26%;
	}

	.text_4 {
		width: 20%;
	}

	.text_5 {
		width: 20%;
	}

	.section_2 {
		margin: 0 10rpx;
		padding: 0 23rpx 616rpx;
		background-color: #ffffff;
		border-radius: 10rpx 10rpx 0 0;

		.group {
			padding: 20rpx 0 15rpx;
			border-bottom: solid 3rpx #eeeeee;

			.font {
				font-size: 24rpx;
				font-family: PingFangSC;
				line-height: 23rpx;
				color: #999999;
			}


		}

		.list {
			padding-top: 3rpx;

			.list-item {
				padding: 24rpx 4rpx;
				border-bottom: solid 3rpx #eeeeee;

				.font_2 {
					font-size: 24rpx;
					font-family: PingFangSC;
					line-height: 23rpx;
					color: #011613;
				}

				.font_3 {
					font-size: 24rpx;
					font-family: PingFangSC;
					line-height: 24rpx;
					color: #00806b;
				}

				.group_4 {
					width: 20%;

					.image {
						width: 10rpx;
						height: 24rpx;
						margin-right: 8rpx;
					}

					.image_2 {
						width: 10rpx;
						height: 24rpx;
						margin-right: 14rpx;
						margin-left: -6rpx;
					}
				}

				.font_4 {
					font-size: 24rpx;
					font-family: PingFangSC;
					line-height: 23rpx;
					color: #00806b;
				}


			}

			.text-wrapper {
				padding: 14rpx 0;
				margin-left: 25rpx;
				background-color: #00806b;
				border-radius: 24rpx;
				width: 110rpx;
				height: 48rpx;
				position: absolute;
				right: -50rpx;

				.font_5 {
					font-size: 20rpx;
					font-family: PingFangSC;
					line-height: 19rpx;
					color: #ffffff;
				}

				.text_6 {
					line-height: 20rpx;
				}
			}
		}
	}

	.text {
		text-transform: uppercase;
	}

	/*顶部口粮和就睡样式*/
	.group {
		padding: 0 145rpx 20rpx 161rpx;

		.group_2 {
			padding: 19rpx 0 16rpx 3rpx;

			.text_2 {
				color: #00806b;
				line-height: 27rpx;
				font-size: 28rpx;
				font-family: PingFangSC;
				height: 50rpx;
				border-bottom: 8rpx solid;
			}

			.text_3 {
				color: #141414;
				line-height: 27rpx;
				width: auto;
				font-size: 28rpx;
				height: 50rpx;
				font-family: PingFangSC;
			}
		}

		.section {
			background-color: #00806b;
			border-radius: 4rpx;
			width: 56rpx;
			height: 8rpx;
			padding: 0;
		}
	}
}
</style>